<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>用户问卷提交记录</span>
        </div>
      </template>
      
      <div class="filter-container">
        <el-form :inline="true" :model="listQuery">
          <el-form-item label="用户ID">
            <el-input v-model="listQuery.userId" placeholder="用户ID" clearable @clear="handleFilter" />
          </el-form-item>
          <el-form-item label="活动ID">
            <el-input v-model="listQuery.eventId" placeholder="活动ID" clearable @clear="handleFilter" />
          </el-form-item>
          <el-form-item label="问卷模板ID">
            <el-input v-model="listQuery.templateId" placeholder="问卷模板ID" clearable @clear="handleFilter" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleFilter">搜索</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table
        v-loading="listLoading"
        :data="list"
        border
        style="width: 100%"
      >
        <el-table-column label="记录ID" prop="id" align="center" width="80" />
        <el-table-column label="用户ID" prop="userId" align="center" width="100" />
        <el-table-column label="用户名称" prop="userName" align="center" width="120" />
        <el-table-column label="活动ID" prop="eventId" align="center" width="100" />
        <el-table-column label="电子票ID" prop="ticketId" align="center" width="120" />
        <el-table-column label="问卷模板ID" prop="templateId" align="center" width="120" />
        <el-table-column label="问卷标题" prop="templateTitle" align="center" min-width="150" />
        <el-table-column label="提交时间" prop="submittedAt" align="center" width="180" />
        <el-table-column label="操作" align="center" width="120">
          <template #default="scope">
            <el-button size="small" type="primary" @click="viewAnswers(scope.row)">查看答案</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="listQuery.pageNum"
          v-model:page-size="listQuery.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 答案详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="问卷答案详情"
      width="50%"
    >
      <div v-if="currentAnswers">
        <div v-for="(value, key) in currentAnswers" :key="key" class="answer-item">
          <div class="question-title">问题 {{ key }}：</div>
          <div class="answer-content" v-if="Array.isArray(value)">
            <el-tag v-for="(item, index) in value" :key="index" style="margin-right: 5px;">{{ item }}</el-tag>
          </div>
          <div class="answer-content" v-else>{{ value }}</div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getUserQuestionnaireSubmissions } from '@/api/questionnaire'

// 数据列表
const list = ref([])
const total = ref(0)
const listLoading = ref(true)
const listQuery = reactive({
  userId: undefined,
  eventId: undefined,
  templateId: undefined,
  pageNum: 1,
  pageSize: 10
})

// 弹窗控制
const dialogVisible = ref(false)
const currentAnswers = ref(null)

// 初始化
onMounted(() => {
  getList()
})

// 获取列表数据
const getList = () => {
  listLoading.value = true
  getUserQuestionnaireSubmissions(listQuery).then(response => {
    list.value = response.data.list
    total.value = response.data.total
    listLoading.value = false
  }).catch(() => {
    listLoading.value = false
  })
}

// 搜索
const handleFilter = () => {
  listQuery.pageNum = 1
  getList()
}

// 重置搜索条件
const resetFilter = () => {
  listQuery.userId = undefined
  listQuery.eventId = undefined
  listQuery.templateId = undefined
  listQuery.pageNum = 1
  getList()
}

// 查看答案
const viewAnswers = (row) => {
  currentAnswers.value = row.answers
  dialogVisible.value = true
}

// 处理分页大小变化
const handleSizeChange = (newSize) => {
  listQuery.pageSize = newSize
  getList()
}

// 处理分页当前页变化
const handleCurrentChange = (newPage) => {
  listQuery.pageNum = newPage
  getList()
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.filter-container {
  margin-bottom: 20px;
}
.answer-item {
  margin-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}
.question-title {
  font-weight: bold;
  margin-bottom: 5px;
}
.answer-content {
  word-break: break-all;
}
.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style> 